<template>
  <button ref="_ref" class="vk-button" :class="{
    [`vk-button--${type}`]: type,
    [`vk-button--${size}`]: size,
    'is-plain': plain,
    'is-round': round,
    'is-circle': circle,
    'is-disabled': disabled,
    'is-loading': loading
  }" :disabled="disabled || loading" :autofocus="autofocus" :type="nativeType">
    <Icon icon='spinner' spin v-if="loading" />
    <Icon :icon='icon' v-if='icon' />
    <span>
      <slot />
    </span>
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Icon from '../Icon/Icon.vue'
defineOptions({
  name: 'VKButton'
})
// 第一种
import type { ButtonProps } from './types'

withDefaults(defineProps<ButtonProps>(), {
  nativeType: 'button'
})
// 第二种
// import { buttonProps } from './types'
// defineProps(buttonProps)
const _ref = ref<HTMLButtonElement>()
defineExpose({
  ref: _ref
})
</script>
<style scoped></style>